<template>
	<view>
		<zmm-watermark :watermark="userStore.watermark" v-if="userStore.watermark"></zmm-watermark>
		<!--导航栏-->
		<pageLayout
			:barTitle="title"
			:isSearchNull="isSearchNull"
			:isOpen="isOpen"
			@rightClick="clickSearch">
		</pageLayout>
		<!--查询弹窗-->
		<up-popup :z-index="90" :show="isOpen" @close="closeSearch" mode="top">
			<view @touchmove.stop.prevent>
			<scroll-view class="search" scroll-y="true" @touchmove.stop>
				<view class="search-form">
					<uni-forms ref="searchRef" :modelValue="searchModel" label-width="160rpx">
						<uni-forms-item label="岗位" v-if="!userStore?.kpiPostsId">
							<uni-data-select
								v-model="searchModel.crmPostId"
								placeholder="请选择岗位"
								:localdata="kpiPostList"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="确认状态">
							<uni-data-select
								v-model="searchModel.status"
								placeholder="请选择确认状态"
								:localdata="kpiPostNoticeStatusList"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="目标月份">
							<picker mode="date" fields="month" :value="searchModel.targetMonth" @change="targetMonthChange">
								<ty-picker
									placeholder="请选择目标月份"
									@clear="clearPicker"
									:value="searchModel.targetMonth"></ty-picker>
							</picker>
						</uni-forms-item>
					</uni-forms>
					<view class="search-footer main-flex">
						<up-button
							class="search-footer-item"
							text="搜索"
							type="primary"
							@click="searchSubmit"
							icon="search"></up-button>
						<up-button
							class="search-footer-item"
							@click="resetSubmit"
							text="重置"></up-button>
					</view>
				</view>
			</scroll-view>
			</view>
		</up-popup>
		<view class="content">
			<!--内容-->
			<view class="table">
				<ty-table
					:data="tableList"
					:columns="columns"
					:sortable="true"
					:cellClassName="() => 'table-cell'"
					:headerCellClassName="() => 'table-cell'"
					:rowClassName="() => 'table-row'"
					stripe
					border>
					<template v-slot:post="{ row }">
						<view class="table-td-cell">
							<view class="table-td-row">
								岗位：
								<text class="table-td-text">{{arrText(kpiPostList, row.crmPostId)}}</text></view>
							<view class="table-td-row">
								年月：
								<text class="table-td-text">{{row.targetMonth}}</text></view>
							<view class="table-td-row">
								状态：
								<uni-tag size="small" :text="arrText(kpiPostNoticeStatusList, row.status)" /></view>
						</view>
					</template>
					<template v-slot:user="{ row }">
						<view class="table-td-cell">
							<view class="table-td-row">
								用户：
								<text class="table-td-text">{{row.targetUserName}}</text></view>
							<view class="table-td-row">
								说明：
								<text class="table-td-text">{{row.remark}}</text></view>
						</view>
					</template>
					<template v-slot:operate1="{ row }">
						<up-button v-if="checkPermi(['zhouyz:kpiPostNotice:edit']) && row.status === 0" size="mini" type="primary" text="确认" @click.stop="openEdit(row)"></up-button>
					</template>
					<template v-slot:empty>
						<view class="table-empty">
							<up-empty mode="data"/>
						</view>
					</template>
				</ty-table>
			</view>
			<!--分页-->
			<view class="pagination" v-show="total > 0">
				<ty-pagination
					:total="total"
					:pageSize="pageSize"
					:currentPage="pageNum"
					:pageSizes="[10, 20, 30, 50]"
					mode="simple"
					layout="first,prev,page,next,last"
					@sizeChange="sizeChange"
					@change="pageChange">
				</ty-pagination>
			</view>
		</view>
		
		<!--确认弹窗-->
		<up-popup :z-index="90" round="5" closeable :show="showEdit" @close="editCancel" mode="center">
			<view class="edit">
				<view class="edit-header">通知确认</view>
				<view class="edit-form">
					<uni-forms
						ref="editRef"
						:rules="editRules"
						:modelValue="editModel"
						label-width="160rpx">
						<uni-forms-item label="确认状态" name="status" required>
							<view class="edit-form-checkbox main-flex">
								<uni-data-checkbox @change="changeStatus" v-model="editModel.status" :localdata="statusList" />
							</view>
						</uni-forms-item>
						<uni-forms-item label="确认说明" name="remark">
							<uni-easyinput type="textarea" v-model="editModel.remark" :placeholder="tip"></uni-easyinput>
						</uni-forms-item>
					</uni-forms>
					<view class="edit-footer main-flex">
						<up-button
							class="edit-footer-item"
							@click="editCancel"
							text="取消"></up-button>
						<up-button
							class="edit-footer-item"
							text="确认"
							type="primary"
							@click="editConfirm"></up-button>
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { computed, onMounted, ref, getCurrentInstance } from 'vue'
import { tab, auth, modal } from "@/plugins"
import { getTitle } from "@/utils/getter"
import { checkPermi, checkRole, checkOnlyPermi, checkOnlyRole } from "@/utils/permission"
import { kpiScheduleType } from "@/api/system/dict/data"
import { kpiPost, kpiPostNotice, kpiPostNoticeEdit } from "@/api/erp_api/kpi"
import { isObjectEmptySimple, copyText, arrText } from '@/utils/ty.js'
import useUserStore from '@/store/modules/user'
import { kpiPostNoticeStatusList } from '@/utils/config.js'
import { onReady } from '@dcloudio/uni-app'
import { timeFormat } from 'uview-plus'

	const userStore = useUserStore()
	const { proxy } = getCurrentInstance()
	// 标题设置
	const title = ref('')
	const type = ref('')
	onLoad((option) => {
		title.value = getTitle(userStore.menu)
		type.value = option.type ? option.type : ''
		if (option.type == 1) {
			searchModel.value.status = 0
			searchModel.value.targetMonth = ''
		}
		uni.setNavigationBarTitle({
			title: title.value 
		})
	})
	
	// 岗位
	const kpiPostList = ref([])
	const getKpiPost = () => {
		return kpiPost().then(res => {
			kpiPostList.value = res.rows.map(item => {
				return {
					...item,
					value: item.id,
					text: `${item.userPostName}【${item.level}】`
				}
			}) || []
		})
	}
	
	// 选择年月
	const targetMonthChange = (e) => {
		searchModel.value.targetMonth = e.detail.value
	}
	const clearPicker = () => {
		searchModel.value.targetMonth = ''
	}
	
	// 搜索相关
	const isSearchNull = ref(true)
	const isOpen =  ref(false)
	const clickSearch = (val) => {
		isOpen.value = val
	}
	const closeSearch = (val) => {
		isOpen.value = false
	}
	// 确认搜索
	const searchRef = ref(null)
	const searchModel = ref({
		crmPostId: userStore?.kpiPostsId || '',
		status: type.value == 1 ? 0 : '',
		targetMonth: type.value == 1 ? '' : timeFormat(new Date(), 'y-m')
	})
	const searchSubmit = () => {
		pageNum.value = 1
		tableList.value = []
		isOpen.value = false
		searchFirst()
	}
	// 重置搜索
	const resetSubmit = () => {
		// searchRef.value.resetFields()
		searchModel.value = {
			crmPostId: userStore?.kpiPostsId || '',
			status: type.value == 1 ? 0 : '',
			targetMonth: type.value == 1 ? '' : timeFormat(new Date(), 'y-m')
		}
		isSearchNull.value = true
		isOpen.value = false
		searchFirst()
	}
	
	
	// 数据查询
	const pageNum = ref(1)
	const pageSize = ref(10)
	const total = ref(0)
	const tableList = ref([])
	const isLoading = ref(false)
	
	// 表格头部
	const columns = ref([
		{ title: '岗位', key: 'post'},
		{ title: '用户', key: 'user' },
		{ title: '操作', key: 'operate1', width: '110rpx', align: 'center' }
	])
	
	// 从第一页查询
	const searchFirst = () => {
		pageNum.value = 1
		tableList.value = []
		isSearchNull.value = isObjectEmptySimple(searchModel.value)
		getList()
	}
	//页数切换
	const pageChange = (page) => {
		pageNum.value = page
		getList()
	}
	//每页条数切换
	const sizeChange = (size) => {
		pageSize.value = size
		getList()
	}
	
	const getList = () => {
		const params = {
			pageNum: pageNum.value,
			pageSize: pageSize.value
		}
		if (searchModel.value.targetMonth) {
			params.targetMonth = searchModel.value.targetMonth.replace('-', '')
		}
		if (userStore.kpiPostsId) {
			// params.crmPostId = userStore.kpiPostsId
			params.targetUser = userStore.user.userId
		}
		if (searchModel.value.crmPostId) {
			params.crmPostId = searchModel.value.crmPostId
		}
		if (searchModel.value.status || searchModel.value.status === 0) {
			params.status = searchModel.value.status
		}
		// 判断段当前用户
		// if (!checkRole(['admin'])) {
		// 	params.targetUser = userStore.user.userId
		// }
		isLoading.value = true
		uni.showLoading({
			title: '数据加载中...'
		})
		kpiPostNotice(params).then(res => {
			tableList.value = res.rows || []
			total.value = res.total
			isLoading.value = false
			uni.hideLoading()
    }).catch(() => {
			isLoading.value = false
			uni.hideLoading()
		})
	}
	
	// 修改
	const showEdit = ref(false)
	
	//打开修改
	const editId = ref('')
	const openEdit = (row) => {
		showEdit.value = true
		editId.value = row.id
	}
	
	// 取消修改
	const editCancel = () => {
		showEdit.value = false
		editId.value = ''
		editModel.value = {
			remark: '',
			status: ''
		}
	}

	const tip = ref('请输入内容')
	const changeStatus = (e) => {
		if (e.detail.value === 1) {
			tip.value = '请输入内容'
			editModel.value.remark = '我已知晓考核内容'
		} else if (e.detail.value === 2) {
			tip.value = '请输入拒绝内容'
			editModel.value.remark = ''
		}
	}
	
	const editRef = ref(null)
	const editModel = ref({
		remark: '',
		status: ''
	})
	const editRules = ref({
		status: {
			rules: [{ required: true, errorMessage: '请选择确认状态' }]
		}
	})
	const statusList = [{ value: 1, text: '确认'},{ value: 2, text: '拒绝'}]
	const editConfirm = () => {
		editRef.value.validate().then(formRes => {
			kpiPostNoticeEdit({
				...formRes,
				id: editId.value
			}).then((res) => {
				modal.showToast(res.msg)
				editCancel()
				getList()
			})
		})
	}
	
	onMounted(async () => {
		await getKpiPost()
		searchFirst()
	})
</script>

<style scoped lang="scss">
	.status1 {
		color: #19be6b;
	}
	.status2 {
		color: #fa3534;
	}
</style>
